<template>
  <view v-if="shenheStatus == 0" class="page">
    <pageHeader :items="items" :index="status" @change="change"> </pageHeader>

    <view class="list">
      <view class="list-header">
        <view class="date" @click="show = true" v-if="!type">
          <!-- <view class="num">{{ month_time.split("-")[1] }}</view> -->
          <view class="num">{{ month_time }}</view>
          <view>月</view>
          <view class="arr"></view>
        </view>
        <view class="date" @click="show = true" v-else>
          <view v-if="end_time">{{ start_time }} 至 {{ end_time }}</view>
          <view v-else>{{ start_time }} 至 {{ activeDate }}</view>

          <view class="arr"></view>
        </view>

        <view class="price">累计业绩 ¥{{ total_goods_amount }}</view>
      </view>

      <view class="item" v-for="item of list" :key="item.id">
        <view class="tit flex">
          <view class="name">订单编号：{{ item.order_no }}</view>

          <view class="num">+{{ item.goods_amount }}</view>
        </view>

        <view class="des flex">
          <view class="time">{{ item.created_at }}</view>

          <view :class="['status', item.status == 2 ? 'on' : '']">{{
            item.status_text
          }}</view>
        </view>
      </view>
    </view>

    <toolsMore :status="moreStatus"></toolsMore>

    <pageTime
      v-model="show"
      @callback="handleChangeDate"
      :timeList="time_type"
      ref="pageTime"
    ></pageTime>
    <transitionPage></transitionPage>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { orderPoolList } from "@/api/teamGrades.js";
import toolsMore from "@/components/tools/tools-more.vue";
import pageHeader from "./components/page-header.vue";
import pageTime from "./components/page-time.vue";

export default {
  components: {
    Shenhe,
    toolsMore,
    pageHeader,
    pageTime
  },
  data() {
    return {
      status: -1,
      items: [
        { name: "全部", id: -1 },
        { name: "未付款", id: 0 },
        { name: "已付款", id: 1 },
        { name: "已完成", id: 2 }
      ],

      type: 0,

      list: [],
      moreStatus: 3,
      page: 1,
      isEnd: false,
      show: false,

      start_time: 0,
      end_time: 0,
      month_time: "0",

      time_type: [],
      total_goods_amount: 0,
      activeDate: ""
    };
  },

  onLoad(opi) {
    if (opi.status) this.status = parseInt(opi.status);

    this.month_time = this.$u.timeFormat(new Date().getTime(), "yyyy-mm");
    this.activeDate = this.$u.timeFormat(new Date().getTime(), "yyyy-mm-dd");
    this.clearData();
  },

  methods: {
    change(status) {
      this.status = status;
      this.clearData();
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];

      this.getList();
    },

    async getList() {
      let {
        list: oldList,
        page: pageNo,
        status,
        month_time,
        start_time,
        end_time
      } = this;

      this.moreStatus = 2;
      const res = await orderPoolList(
        {
          pageNo,
          status,
          pageSize: 20,
          month_time,
          start_time,
          end_time
        },
        true
      );

      uni.stopPullDownRefresh();
      this.moreStatus = 1;
      if (!res.code) {
        let {
            data: list,
            totalCount,
            time_type,
            total_goods_amount
          } = res.data,
          count = parseInt(totalCount);

        if (list.length) {
          oldList.push(...list);
          this.page = this.page + 1;
        }

        if (oldList.length >= count) {
          this.isEnd = true;
          this.moreStatus = 3;
        }

        this.time_type = time_type.map((el) => {
          return {
            name: el.date,
            id: el.time
          };
        });
        this.total_goods_amount = total_goods_amount;
      }
    },

    handleChangeDate({ end_time, month_time, start_time, type }) {
      this.type = type;
      this.end_time = end_time;
      this.month_time = month_time;
      this.start_time = start_time;

      this.clearData();
    }
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getList();
  },

  onPullDownRefresh() {
    this.clearData();
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: #f2f2f2;
  min-height: 100vh;
}

.list {
  margin: 24rpx;
  padding: 0 24rpx;
  border-radius: 20rpx;
  background: #fff;
  color: #262626;

  .item {
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f8f8f8;
    font-size: 24rpx;

    &:last-of-type {
      border-block-start: 0;
    }
  }

  .name {
    font-size: 28rpx;
  }

  .time {
    color: #8c8c8c;
  }

  .des {
    padding: 10rpx 0;
  }

  .num {
    font-size: 32rpx;
    font-weight: bold;
  }

  .status {
    color: #f0250e;

    &.on {
      color: #8c8c8c;
    }
  }
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-header {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f8f8f8;

  .date {
    display: flex;
    align-items: center;
    padding: 24rpx 0 0;
  }

  .num {
    font-size: 60rpx;
    font-weight: bold;
    line-height: 1;
  }

  .arr {
    margin: 0 0 0 10rpx;
    border-top: 10rpx solid #262626;
    border-right: 10rpx solid transparent;
    border-left: 10rpx solid transparent;
  }
}
</style>
